/**
 * function:
 * @author watson  email: watson.wu@hotmail.com
 * @date 2009-9-2
 */
$.fn.TabPanel = function(opt){
	var $tabindex=1;
	var cfg={
		items:[{'title':false,'closed':true,'icon':false,'html':false,load:false,ifr:false,'callback':false}],
		width:500,
		height:500,
		tabcontentWidth:498,
		tabWidth:66,
		tabHeight:25,
		tabHtml:''
	};
	$.extend(cfg,opt);
	var tW=cfg.tabWidth*cfg.items.length;
	cfg.tabScroll?tW-=cfg.tabScrollWidth*2:null;
	var tab=$('<div class="tab" id="jq_tab_navigate" />').height(cfg.tabHeight).append('<ul />');
	//tab target content
	var tabContent=$('<div class="tab-div-content" id="jq_tab_content" />');
	tabContent.width(cfg.tabcontentWidth).height(cfg.height-cfg.tabHeight);
	var ccW=(cfg.items.length*cfg.tabWidth)-cfg.width;
	//var tabH=$('<div />').append(cfg.tabHtml).addClass(cfg.tabClassHtmlDiv).height(cfg.tabHeight);
	var tabH='';
	var scrollTab=function(o,flag){
	};

	function addTab(item){
		//close
		var close='';
		if(item.closed){
			close=$('<a class="close" onclick="return false;" />').click(function(){
				var _self=$(this).parent();
				var panelId=_self.attr('id').replace('tab','panel');
				if(panelId)
					$('#'+panelId).remove();
				//more than one tab
				if(tab.find('li').length>1){
					var $active=_self.prev();
					if(!$active || $active.length<1)
						var $active=_self.next();
					$active.attr('class','on');
					var panelId=$active.attr('id').replace('tab','panel');
					if(panelId)
						$('#'+panelId).removeClass('hd');
				}
				_self.remove();
			});
		}
		var $content=$('<div id="panel-'+$tabindex+'" class="panel hd"></div>');
		//append content
		if(item.html){
			$content.html(item.html);
		}else if(item.load){
			$content.load(item.load);
		}else{
			$content.append('<iframe class="panel-ifr" frameborder="0" height="100%" border="0" src="'+item.ifr+'"></iframe>');
		}
		//callback
		$content.appendTo(tabContent);
		var inner=$('<a class="inner" onclick="return false;"><span class="text">'+(item.title?item.title:"tab"+$tabindex)+'</span></a>');
		$('<li class="off" id="tab-'+($tabindex)+'"></li>').click(function(){
			var _self=$(this);
//			if(_self.hasClass('on')) return;//itself has been display
			_self.parent().find('li[class=on]').attr('class','off');
			_self.attr('class','on');
			//show content
			var panelId=_self.attr('id').replace('tab','panel');
			if(panelId){
				tabContent.find('div[class=panel]').addClass('hd');
				tabContent.find('#'+panelId).removeClass('hd');
			}
		}).append(close).append(inner).appendTo(tab.find('ul')).click();
		if(item.callback) item.callback.call();
		$tabindex++;
	};
	function delTab(target){
		var $target;
		if(typeof target==='string'){
			$target=$('$'+target);
		}else{
			var $lis=tab.find('li');
			if(!$lis || $lis.length<$target) return;
			$target=$lis[target];
		}
		var panelId=$target.attr('id').replace('tab','').replace('panel','');
		var _self=$('#tab-'+panelId);
		$('#panel-'+panelId).remove();
		if(tab.find('li').length>1){
			var $active=_self.prev();
			if(!$active || $active.length<1)
				var $active=_self.next();
			$active.attr('class','on');
			panelId=$active.attr('id').replace('tab','panel');
			$('#'+panelId).removeClass('hd');
		}
		_self.remove();
	};
	function getIndex(){
		return $tabindex;
	}
	
	$.each(cfg.items,function(i,o){
		addTab(o);
	});
	var cW=cfg.width;
	var scrollLeft,srcollRight;
	
	var container=$('<div class="tab-div" />').css({
		'overflow':'hidden',
		'position':'relative',
		'width':cfg.width,
		'height':cfg.tabHeight
	});
	var tabContenter=$('<div />').css({
		'overflow':'hidden',
		'width':cW,
		'height':cfg.tabHeight,
		'float':'left'
	}).append(tab);
	var obj=$(this).append(tabH).append(container.append(tabContenter)).append(tabContent);
	tab.find('li:first').click();
	return obj.extend({'addTab':addTab,'getIndex':getIndex,'delTab':delTab});
};